import { ProCard, ProColumns, ProForm, ProFormRadio, ProFormText, ProTable } from "@ant-design/pro-components"
import { Col, Row, Tabs, TabsProps, Tree } from "antd";

const App:React.FC=()=>{

     interface DataType{
            code?:string,name?:string,degree?:string,status?:string,ismust?:string,type?:string,
         };
    
         const columns:ProColumns<DataType>[]=[
            {dataIndex:'code',title:'编码'},{dataIndex:'name',title:'名称'},
            {dataIndex:'degree',title:'等级'},{dataIndex:'ismust',title:'是否必检'},
             {dataIndex:'type',title:'数据类型'},
            {dataIndex:'status',title:'状态'},
         ];
    
         const tdata:DataType[]=[
            {code:'A001',name:'机械臂',type:'正常，异常',status:'正常',degree:'A级',ismust:'是'},
            {code:'A002',name:'夹具',type:'正常，异常',status:'正常',degree:'A级',ismust:'是'},
            {code:'A003',name:'摄像头',type:'正常，异常',status:'正常',degree:'C级',ismust:'是'},
            {code:'A004',name:'激光仪',type:'录入',status:'正常',degree:'B级',ismust:'是'},
            {code:'A005',name:'水平仪',type:'录入',status:'正常',degree:'B级',ismust:'是'},
         
         ];

        

         const treeNode=[
            {
                key:'0',
                title:'设备分类',
                children:[
                    {
                        key:'01',
                        title:'生产设备',
                        children:[
                            {key:'0101',title:'数控机床'},
                            {key:'0102',title:'磨床'},
                            {key:'0103',title:'装配'},
                            {key:'0104',title:'喷漆'},
                        ],
                    },
                    {
                        key:'02',
                        title:'辅助设备',
                        children:[
                            {key:'0201',title:'机械手'},
                            {key:'0202',title:'传送带'},
                            {key:'0202',title:'叉车'},
                        ],
                    },
                    {
                        key:'03',
                        title:'工装夹具',
                        children:[
                            {key:'0301',title:'刀具'},
                            {key:'0302',title:'模具'},
                            {key:'0303',title:'其他'},
                        ],
                    },
                    {
                        key:'04',
                        title:'房屋建筑',
                        children:[],
                    },
                ]
            },
          ];

     const tabsItem:TabsProps['items']=[
        {
            key:'1',
            label:'点检项目',
            children:<>
            <Row gutter={8}>
            <Col span={6}>
                <ProCard bordered style={{height:600}}>
                 <Tree treeData={treeNode} defaultExpandAll/>
                 </ProCard>
            </Col>
            <Col span={18}>
               <ProCard bordered  style={{height:600}}  >
                     <ProTable<DataType>
                        search={false}
                        options={false}
                        columns={columns}
                        dataSource={tdata}
                        />
            </ProCard>
            </Col>
        </Row>
            </>,
        },
        {
            key:'2',
            label:'点检方案',
            children:<>
              点检项目的组合，可按设备进行绑定。
            </>
        }
     ];
          
    return <>
       <ProCard title='点检项目和方案管理' style={{height:700}} 
       >
         <Tabs items={tabsItem} type="card" />
       </ProCard>
    </>;
};

export default App;